<!--**
* @author: SEKin
* @Date: 2025-03-26
* @description:  单侧阴影
* @Last Modified time: 
*-->
<template>
  <div class="layout-center">
    <div class="g-overflow box">利用 overflow: hidden 隐藏三边</div>
    <div class="g-shadow box">利用 box-shadow 扩张半径可为负值</div>
    <div class="g-clippath box">使用 clip-path 实现任意方向上的裁剪</div>
  </div>
  <!--备注-->
</template>
<script setup>
import {} from 'vue';

/**
 *@description 属性定义区
 */

/**
 *@description 方法区
 */

/**
 *@description 数据变更区
 */

/**
 *@description 组件导出区
 */
</script>
<style lang="scss" scoped>
.box {
  width: 250px;
  height: 250px;
  margin: 1.5em;
	text-align: center;
	line-height: 1.5em;
	padding: 2em;
	outline: 1px dashed red;
}

.g-overflow {
  position: relative;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    inset: 0 0 100px;
    border: 1px solid #000;
    box-shadow: 0 2px 6px 2px;
  }
}

.g-shadow {
  border: 1px solid #000;
  box-shadow: 0 20px 20px -20px;
}
.g-clippath {
  position: relative;
  border: 1px solid #000;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 6px 3px;
    clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
  }
}
</style>
